<template>
  <div>
    <el-card>
      <el-form label-width="20px" :model="queryData">
        <el-row>
          <el-col :span="4">
            <el-form-item>
              <span class="demonstration">小区名称</span>
              <el-input v-model="queryData.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span class="demonstration">开发商名称</span>
              <el-input v-model="queryData.developer" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span class="demonstration">物业公司名称</span>
              <el-input v-model="queryData.estate" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span class="demonstration">创建时间</span>
              <el-date-picker v-model="queryData.create_time" type="daterange" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="x" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="block" style="margin-top: 30px;">
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-button type="primary" @click="addRef.isShow = true">添加角色</el-button>
      <el-table :data="list" border stripe>
        <el-table-column label="缩略图" prop="thumb">
          <template #default="{ row }">
            <!-- <img :src="`http://124.223.14.236:8881${row.thumb}`" style="width: 50px; height: 50px;" /> -->
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${row.thumb}`"
                :zoom-rate="1.2" :preview-src-list="[`http://124.223.14.236:8881${row.thumb}`]" :initial-index="99"
                :z-index="99" fit="cover" :preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" type="index" label="小区名称">
          <template #default="{ row }">
            {{ row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="坐落地址"></el-table-column>
        <el-table-column prop="area" label="占地面积"></el-table-column>
        <el-table-column label="总栋数" prop="total_building">
        </el-table-column>
        <el-table-column label="绿化率" prop="greening_rate">
        </el-table-column>
        <el-table-column label="开发商名称" prop="developer">
        </el-table-column>
        <el-table-column label="物业公司名称" prop="estate">
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success" size="small">修改</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delUser(row.id)">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        :page-sizes="[3, 5, 10]" v-model:page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="count" background>
      </el-pagination>
    </el-card>
    <addForm ref="addRef" @updateList="getList(COMMITY, queryData)" />
  </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import { useListAsync } from '../../../src/xf-hook/getList'
import { useChangePage } from '../../xf-hook/page.js'
import { COMMITY } from '../../../src/urlConst/getUrl.js'
import addForm from './addForm.vue'
import { delComApi } from '../../api/commit'
const { getList, list, count } = useListAsync()
const queryData = reactive({
  create_time: null,
  current: 1,
  pageSize: 10,
  name: null,
  id: null,
  estate: null,
  developer: null
})
const onReset = () => {
  queryData.current = 1
  getList(COMMITY, queryData)
}
const addRef = ref()
const pageChange = useChangePage()
const sizeChange = (val) => {
  pageChange.sizeChange(val, queryData.pageSize)
  getList(COMMITY, queryData)
}
const currentChange = (val) => {
  pageChange.currentChange(val, queryData.current)
  getList(COMMITY, queryData)
}
const editRow = (id) => {
  addRef.value.replyData(id);
}
const onSearch = () => {
  queryData.create_time = queryData.create_time.join(',')
  getList(COMMITY, queryData)
  queryData.create_time = null
  queryData.developer = null,
    queryData.estate = null
  queryData.name = null
}
const delUser = async (id) => {
  await delComApi(id)
  getList(COMMITY, queryData)
}
onMounted(() => {
  getList(COMMITY, queryData)
})
</script>
<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>